<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>收藏夹</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <style>
        body {
            background: #fff;
        }

        .contain {
            padding-top: 10px;
            background: #f3f3f3;
        }

        .bigPic .divPrice {
            color: #ec2e2e;
            font-weight: bold;
            text-align: left;
            padding-left: 10px !important;
            font-size: 14px;
        }

        .bigPic .divBuy {
            text-align: right;
            padding-right: 10px !important;
            color: #327afa;
            /*font-weight: bold;*/
            font-size: 12px;
            float: right !important;
        }

        .bigPic .divPrice, .divBuy {
            padding: 5px;
            overflow: hidden;
        }

        .aui-ellipsis-2 {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .aui-list-view-cell {
            border-radius: 2px;
        }

        /*//一行两列样式*//**/
        .bigPic.aui-list-view.aui-grid-view {
            padding: 0 !important;
            background: #f3f3f3;
        }

        .bigPic.aui-list-view.aui-grid-view .aui-list-view-cell {
            padding: 0 !important;
        }

        .bigPic .aui-col-xs-6:nth-of-type(2n+1) {
            margin-right: 1%;
        }

        .bigPic.aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
            margin: 0 0 0 5px;
            margin-bottom: 1px;
            text-align: left;
            height: 50px;
        }

        .bigPic li {
            background: #fff !important;
            margin-bottom: 8px;
        }

        .bigPic .aui-col-xs-6 {
            width: 49.5%;
        }

        .bigPic .line {

        }

        .stockCount {
            width: 100%;
            overflow: hidden;
            height: 25px;
            line-height: 25px;
            color: #000;
            font-size: 12px;
            text-align: left;
            margin-left: 5px;
            color: #9c9c9c;
        }

        .proPic {
            position: relative;
            font-size: 12px;
        }

        .proPic img {
            display: block;
        }

        .cancelCollection span {
            color: #a2a2a2;
            padding: 5px;
            overflow: hidden;
            display: block;
            font-size: 14px;
            margin-right: 5px;
        }

        /*商家收藏*/
        .aui-img-body {
            height: 60px;
            line-height: 60px;
        }

        .sellerCollection .aui-list-view:after {
            border: none;
        }

        .aui-list-view.aui-in .aui-list-view-cell:after {
            left: 0;
        }

        .sellerCollection .aui-list-view-cell {
            padding: 5px 15px;
        }

        .sellerCollection {
            display: none;
        }

        .aui-list-view .aui-img-object {
            max-width: 60px;
            height: 60px;
            line-height: 60px;
        }
    </style>
</head>
<body>
<div class=" contain">
    <div class="proCollection">
        <ul class="aui-list-view aui-grid-view bigPic">
            <li class="aui-list-view-cell aui-img aui-col-xs-6">
                <div class="proPic">
                    <img class="aui-img-object" src="../../image/pro.png">
                </div>
                <div class="proInfo">
                    <div class="aui-img-body  aui-ellipsis-2">
                        图文列表图文列表图文列表图文列表
                    </div>
                    <div class="aui-border-b line"></div>
                    <div class="divPrice aui-pull-left">
                        ￥<span class="price ">5555.0</span>
                    </div>
                    <div class=" aui-pull-right cancelCollection">
                        <span>取消收藏</span>
                    </div>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-6">
                <div class="proPic">
                    <img class="aui-img-object" src="../../image/pro.png">
                </div>
                <div class="proInfo">
                    <div class="aui-img-body  aui-ellipsis-2">
                        图文列表图文列表图文列表图文列表
                    </div>
                    <div class="aui-border-b line"></div>
                    <div class="divPrice aui-pull-left">
                        ￥<span class="price ">5555.0</span>
                    </div>
                    <div class=" aui-pull-right cancelCollection">
                        <span>取消收藏</span>
                    </div>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img aui-col-xs-6">
                <div class="proPic">
                    <img class="aui-img-object" src="../../image/pro.png">
                </div>
                <div class="proInfo">
                    <div class="aui-img-body  aui-ellipsis-2">
                        图文列表图文列表图文列表图文列表
                    </div>
                    <div class="aui-border-b line"></div>
                    <div class="divPrice aui-pull-left">
                        ￥<span class="price ">5555.0</span>
                    </div>
                    <div class=" aui-pull-right cancelCollection">
                        <span>取消收藏</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="sellerCollection">


        <ul class=" mui-table-view historyListUl aui-list-view">
            <li class="mui-table-view-cell aui-list-view-cell aui-img">
                <div class="mui-slider-right mui-disabled">
                    <a class="mui-btn mui-btn-red delet">取消收藏</a>
                </div>
                <div class="mui-slider-handle" onclick='searchClick(this)'>
                    <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                    <div class="aui-img-body aui-ellipsis-1">
                        图文列表 图文列表 图文列表 图文列表
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell aui-list-view-cell aui-img">
                <div class="mui-slider-right mui-disabled">
                    <a class="mui-btn mui-btn-red delet">取消收藏</a>
                </div>
                <div class="mui-slider-handle" onclick='searchClick(this)'>
                    <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                    <div class="aui-img-body aui-ellipsis-1">
                        图文列表 图文列表 图文列表 图文列表
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell aui-list-view-cell aui-img">
                <div class="mui-slider-right mui-disabled">
                    <a class="mui-btn mui-btn-red delet">取消收藏</a>
                </div>
                <div class="mui-slider-handle" onclick='searchClick(this)'>
                    <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                    <div class="aui-img-body aui-ellipsis-1">
                        图文列表 图文列表 图文列表 图文列表
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell aui-list-view-cell aui-img">
                <div class="mui-slider-right mui-disabled">
                    <a class="mui-btn mui-btn-red delet">取消收藏</a>
                </div>
                <div class="mui-slider-handle" onclick='searchClick(this)'>
                    <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                    <div class="aui-img-body aui-ellipsis-1">
                        图文列表 图文列表 图文列表 图文列表
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell aui-list-view-cell aui-img">
                <div class="mui-slider-right mui-disabled">
                    <a class="mui-btn mui-btn-red delet">取消收藏</a>
                </div>
                <div class="mui-slider-handle" onclick='searchClick(this)'>
                    <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                    <div class="aui-img-body aui-ellipsis-1">
                        图文列表 图文列表 图文列表 图文列表
                    </div>
                </div>
            </li>
        </ul>


    </div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/echo.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/myInfo.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
        api.setRefreshHeaderInfo({
            visible: true,
            loadingImg: 'widget://image/ptr_pull.png',
            bgColor: '#efeff4',
            textColor: '#959595',
            textDown: '下拉刷新',
            textUp: '松开刷新',
            showTime: true
        }, function (ret, err) {
            page = 1;
            getData(catid);
            api.refreshHeaderLoadDone();
        });

    }
    //接收win跨域执行tab切换
    function changeContent(type) {
        if (type == "product") {
            $(".proCollection").css({"display": "block"});
            $(".sellerCollection").css({"display": "none"});
        } else {
            $(".proCollection").css({"display": "none"});
            $(".sellerCollection").css({"display": "block"});
        }
    }
    $(document).on("click", ".cancelCollection", function () {
        var $this = $(this);
        mui.confirm("确定取消收藏？", "", ["是", "否"], function (e) {
            if (e.index == 0) {
                $this.parents("li").remove();
                api.toast({msg: "操作成功！"});
            }
        })
    })
    $(document).on("click", ".delet", function () {
        var $this = $(this);
        mui.confirm("确定取消收藏？", "", ["是", "否"], function (e) {
            if (e.index == 0) {
                $this.parents("li").remove();
                api.toast({msg: "操作成功！"});
            }
        })
    })
</script>
</html>